<template>
    <div class="reportForm">
        <el-form :model="formDataList.searchForm" label-width="80px" size="mini" style="flex:22" v-model="aa">
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item,index) in formDataList.formGroup" :key='index'>
                    <el-form-item :label="item.name">
                       <component
                        :is="item.key"
                        :label='item.label'
                        :placeholder='item.placeholder'
                        :comData='item'
                        @setFormData='setFormData'></component>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="btn" style="flex:2;padding-left:20px">
            <div style="display:flex">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="selectTableData">查询</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import formInput from './formInput.vue'
import formDatePicker from './formDatePicker.vue'
import formSelect from './formSelect'
export default {
    props: {
        formDataList: {
            type: Object,
            default: ""
        }
    },
    data() {
        return {
            name: 'form',
            aa: ''
        }
    },
    components: {
        // ipt: input输入框; date: 日期选择; sel: 下拉选择框
        ipt: formInput,
        date: formDatePicker,
        sel: formSelect,
    },
    methods: {
        // 查询
        selectTableData() {
            this.$store.commit('formDataChange', this.formDataList.searchForm)
        },
        // 表单数据
        setFormData(data) {
            for(var i in data) {
                this.formDataList.searchForm[i] = data[i]
            }
        }
    }
}
</script>

<style lang="less" scoped>
.reportForm {
    position: relative;
    padding: 20px 20px 0;
    display: flex;
    width: 100%;

    .arrow {
        position: absolute;
        left: 50%;
        bottom: -14px;
        transform: translate(-50%, -50%);
        width: 40px;
        border: 1px solid #e8e8e8;
        border-radius: 18px;
        height: 14px;
        background: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 11px;
        font-size: 12px;
    }

    .isShowMore {
        height: 40px;
        overflow: hidden;
    }

    // /deep/ .el-form-item__label {
    //     white-space: nowrap;
    // }

    /deep/ .el-range-editor.el-input__inner {
        width: 100%;
    }

    /deep/ .el-range-editor .el-range-input {
        flex: 3;
    }

    /deep/ .el-date-editor .el-range-separator {
        flex: 1;
    }

    /deep/ .el-select{
        width: 100%;
    }

    /deep/ .el-autocomplete{
        width: 100%;
    }
}
</style>